<template>
  <div id="box-center">
    <div id="box-menu">
      <el-input
        placeholder="请输入内容"
        v-model="findMess"
        style="width: 200px;margin-right: 5px;"
        size="small"
        clearable
      ></el-input>
      <el-button type="primary" icon="el-icon-search" size="small" @click="findOption">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="showAdd">新建房间</el-button>
    </div>
    <div id="box-body">
      <div id="box-new" v-show="showNew">
        <el-divider></el-divider>
        <i class="el-icon-circle-plus-outline"></i>
        <span>房间名称：</span>
        <el-input
          placeholder="请输入内容"
          v-model="newRoom.name"
          style="width: 200px;margin-right: 20px;"
          size="small"
          clearable
        ></el-input>
        <span>备注信息：</span>
        <el-input
          placeholder="请输入内容"
          v-model="newRoom.remarks"
          style="width: 300px;"
          size="small"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          style="float: right;"
          @click="doCreateRoom"
        >完成创建</el-button>
        <el-divider></el-divider>
      </div>
      <div id="box-change" v-show="showChange">
        <el-divider></el-divider>
        <i class="el-icon-warning-outline"></i>
        <span>房间名称：</span>
        <el-input
          placeholder="请输入内容"
          v-model="nowRoom.name"
          style="width: 200px;margin-right: 20px;"
          size="small"
          clearable
        ></el-input>
        <span>备注信息：</span>
        <el-input
          placeholder="请输入内容"
          v-model="nowRoom.remarks"
          style="width: 300px;"
          size="small"
          clearable
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-check"
          size="small"
          style="float: right;"
          @click="doChangeRoom"
        >完成修改</el-button>
        <el-divider></el-divider>
      </div>
      <div id="box-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%;"
          height="435"
          size="mini"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编号">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button :disabled="scope.row.number !== tableData.length" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="prev, pager, next"
          :total="dataCount"
          background
          style="width: 100%;margin-top: 15px;"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getRoomList, addRoom, changeRoom, deleteRoom } from "@/api/manage.js";
export default {
  data() {
    return {
      findMess: "",
      tableData: [],
      dataCount: 0,
      newRoom: {
        name: "",
        remarks: "",
      },
      nowRoom: {
        id: "",
        number: 0,
        name: "",
        remarks: "",
      },
      showNew: false,
      showChange: false,
      currentPage: 1,
    };
  },
  methods: {
    getMess() {
      getRoomList(this.currentPage, 10).then((response) => {
        if (response.flag) {
          this.tableData = response.data.data;
          this.dataCount = response.data.total;
        } else {
          this.$message({
            message: resposne.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    showAdd() {
      this.showNew = true;
      this.showChange = false;
    },
    handleEdit(row) {
      this.nowRoom = row;
      this.showNew = false;
      this.showChange = true;
    },
    handleDelete(id) {
      //删除
      deleteRoom(id).then((response) => {
        if (response.flag) {
          this.$message({
            message: response.message,
            type: "success",
            center: true,
          });
        } else {
          this.$message({
            message: "删除房间失败",
            type: "error",
            center: true,
          });
        }
        this.getMess();
      });
    },
    findOption() {
      if (this.findMess.length === 0) {
        this.$message({
          type: "warning",
          message: "请输入信息",
          center: true,
        });
      } else {
        //清空状态
        this.$refs.multipleTable.clearSelection();
        var num = 0;
        for (var i = 0; i < this.tableData.length; i++) {
          var item = this.tableData[i];
          if (JSON.stringify(item).indexOf(this.findMess) !== -1) {
            this.$refs.multipleTable.toggleRowSelection(item, true);
            num++;
          }
        }
        if(num === 0) {
          this.$message({
            message: "未找到任何匹配数据",
            type: "info",
            center: true
          })
        }
      }
    },
    doCreateRoom() {
      if (this.newRoom.name.length === 0) {
        this.$message({
          message: "房间名称不能为空",
          type: "error",
          center: true,
        });
      } else {
        //创建房间
        addRoom(this.newRoom.name, this.newRoom.remarks).then((response) => {
          if (response.flag) {
            this.$message({
              message: response.message,
              type: "success",
              center: true,
            });
            this.newRoom.name = "";
            this.newRoom.remarks = "";
          } else {
            this.$message({
              message: "创建房间失败",
              type: "error",
              center: true,
            });
          }
          this.getMess();
        });
        this.showNew = false;
      }
    },
    doChangeRoom() {
      if (this.nowRoom.name.length === 0) {
        this.$message({
          message: "房间名称不能为空",
          type: "error",
          center: true,
        });
      } else {
        //修改房间
        changeRoom(
          this.nowRoom.id,
          this.nowRoom.name,
          this.nowRoom.remarks
        ).then((response) => {
          if (response.flag) {
            this.$message({
              message: response.message,
              type: "success",
              center: true,
            });
          } else {
            this.$message({
              message: "修改房间失败",
              type: "error",
              center: true,
            });
          }
          this.getMess();
        });
        this.showChange = false;
      }
    },
    handleCurrentChange(val) {
      this.getMess();
    }
  },
  created() {
    this.getMess();
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/myCss/table.scss";
</style>